import DatePicker from 'src/component/DatePicker';
// import { DateRange } from 'src/model/DateFilter';
import style from './RoundDateFilter.module.scss';

type DateRange = any

type Props = {
    fromDate: Date;
    toDate: Date;
    setDateRange: (dateRange: DateRange) => void;
    onChange?: () => void;
};

const RoundDateFilter = ({ fromDate, toDate, setDateRange, onChange }: Props) => {
    const onCalendarChanged = (dateType: 'from' | 'to') => (newDate: Date) => {
        const newDateRange = {
            from: dateType === 'from' || newDate.getTime() < fromDate.getTime() ? newDate : undefined,
            to: dateType === 'to' || newDate.getTime() > toDate.getTime() ? newDate : undefined,
        };
        onChange && onChange();
        setDateRange(newDateRange);
    };

    return (
        <div className={style.self}>
            <DatePicker value={fromDate} onChange={onCalendarChanged('from')} />
            <div>—</div>
            <DatePicker value={toDate} onChange={onCalendarChanged('to')} />
        </div>
    );
};

export default RoundDateFilter;
